<template>
	<!-- <u-popup v-model="show" mode="center" border-radius="15"> -->
		<PopCard :show='show' :title='tips.title' @close="$emit('close')">
			<view slot='content' class="richText">
				<view class="richText-main">
					<rich-text :nodes="tips.mark|getHtml"></rich-text>
				</view>
				<view class="check flexR" v-if="tips.agree===0">
					<radio-group @change="radioChange">
						<label class="radio"><radio value="agree" :disabled="seconds"/>{{tips.agreeMark}}</label>
					</radio-group>
					<text>我已阅读并同意《{{tips.name}}》</text>
				</view>
				<view class="footer-btn flexR u-border-top">
					<view class="left u-border-right" @click="$emit('close')">
						取消
					</view>
					<view class="right" @click="handelSub">
						{{seconds===0?'确认':seconds+'（S）'}}
					</view>
				</view>
			</view>
		</PopCard>
	<!-- </u-popup> -->
</template>

<script>
	import PopCard from '../PopCard/index.vue'
	import { transHtml } from '@/common/js/common.js'
	export default {
		props:{
			tips:{
				type:Object,
				default:()=>{
					return{}
				}
			},
			show:{
				type:Boolean,
				default:false
			}
		},
		components:{PopCard },
		data() {
			return {
				agree:'',
				timerId:null,
				seconds:5
			}
		},
		watch:{
			show:{
				handler:function (val){
					if(val){
						if(this.tips.agree==='0'){
							this.seconds = 5
							this.timerId = setInterval(()=>{
								if(this.seconds===0){
									clearInterval(this.timerId)
									this.timerId = null
								}else{
									this.seconds -=1
								}
							},1000)
						}else{
							this.seconds = 0
						}
					}else{
						this.agree = false
						if(this.timerId){
							clearInterval(this.timerId)
							this.timerId = null
						}
					}
				},
				immediate:true
			}
		},
		filters:{
			getHtml(val){
				return transHtml(val)
			}
		},
		methods: {
			transHtml,
			handelSub(){
				if(this.seconds===0){
					if(this.tips.agree===0){
						if(this.agree){
							this.$emit('handleSubmit')
						}else{
							uni.showToast({
								title:'请阅读并同意协议',
								icon:'none',
								duration:2000
							})
						}
					}else{
						this.$emit('handleSubmit')
					}
				}
			},
			radioChange(e){
				this.agree = e.detail.value
			},
			close() {
				uni.$emit('close');
				// debugger
			}
		},
		destroyed() {
			if(this.timerId){
				clearInterval(this.timerId)
				this.timerId = null
			}
		}
	}
</script>

<style lang="scss" scoped>
	.richText{
		.richText-main{
			margin: 30rpx 40rpx 10rpx 40rpx;
			max-height: 200px;
			overflow: scroll;
			background-color: $uni-bg-color-grey;
			padding: 20rpx;
			line-height: 30rpx;
			font-size: 24rpx;
		}
		.check{
			margin: 0 40rpx;
			margin-bottom: 20rpx;
			font-size: 24rpx;
			align-items: center;
			height: 40rpx;
			line-height: 40rpx;
			label{
				height: 40rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				radio{
					transform:scale(0.6)
				}
			}
			>text{
				color: $theme-color;
			}
		}
		.footer-btn{
			>view{
				flex: 1;
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
			}
			.right{
				color: $theme-color-light;
			}
		}
	}
</style>
